<template>
  <div class="main-content-box">
    <!-- <i class="iconfont">&#xe719;</i> -->
    <div id="topoDemo"></div>
  </div>
</template>

<script>
import G6 from '@antv/g6'
export default {
  name: 'g6demo2',
  data () {
    return {
      demoData: {
        id: 'node0',
        label: '集团',
        type: 'star',
        icon: {
          show: true,
          img: 'https://g.alicdn.com/cm-design/arms-trace/1.0.155/styles/armsTrace/images/TAIR.png',
          width: 40,
          height: 40
        },
        children: [
          {
            id: 'node1',
            label: '光纤',
            type: 'diamond',
            children: [
              {
                id: 'node2',
                label: '4号楼',
                type: 'ellipse',
                children: [
                  {
                    id: 'node5',
                    label: '工作站组'
                  }
                ]
              },
              {
                id: 'node3',
                label: '5号楼',
                type: 'ellipse',
                children: [
                  {
                    id: 'node6',
                    label: '工作站组'
                  }
                ]
              },
              {
                id: 'node4',
                label: '6号楼',
                type: 'ellipse',
                children: [
                  {
                    id: 'node7',
                    label: '工作站组'
                  }
                ]
              },
            ]
          },
          {
            id: 'node8',
            label: '高速带宽',
            type: 'triangle',
            children: [
              {
                id: 'node9',
                label: '1号楼',
                type: 'ellipse',
                children: [
                  {
                    id: 'node10',
                    label: '工作站组'
                  }
                ]
              }
            ]
          },
          {
            id: 'node11',
            label: '2号楼',
            type: 'ellipse',
            children: [
              {
                id: 'node12',
                label: '工作站组'
              }
            ]
          },
          {
            id: 'node13',
            label: '3号楼',
            type: 'ellipse',
            children: [
              {
                id: 'node14',
                label: '工作站组'
              }
            ]
          },
          {
            id: 'node15',
            label: '4号楼',
            type: 'ellipse',
            children: [
              {
                id: 'node16',
                label: '工作站组'
              }
            ]
          }
        ]
      }
    }
  },
  mounted () {
    this.initGrahp()
  },
  methods: {
    initGrahp () {

      //创建G6 图实例
      let width = document.getElementById('topoDemo').scrollWidth * 0.8
      let height = document.getElementById('topoDemo').scrollHeight || 700
      let graph = new G6.TreeGraph({
        container: 'topoDemo',
        width,
        height,
        modes: {
          default: [
            'drag-canvas',
            'drag-node',
            'zoom-canvas',
            {
              type: 'collapse-expand',
              onChange (item, collapse) {
                let data = item.getModel().data
                console.log(item.getModel())
                data.collapse = collapse
                return true
              }
            },
            /**
             * 节点的tooltip
             */
            {
              type: 'tooltip',
              formatText (model) {
                let text = '名称: ' + model.label
                return text
              },
              shouldUpdate: e => {
                return true
              }
            }
          ]
        },
        defaultNode: {
          size: 45,
          anchorPoints: [
            [0, 0.5],
            [1, 0.5],
          ],
          style: {
            fill: '#c6E5F5',
            stroke: '#5B8FF9',
          },
          icon: {
            show: true,
            img: 'https://gw.alipayobjects.com/os/s/prod/antv/assets/image/logo-with-text-73b8a.svg',
            width: 20,
            height: 20
          },
          linkPoints: {
            top: true,
            bottom: true,
            left: true,
            right: true,
            fill: '#fff',
            size: 5,
          },
        },
        defaultEdge: {
          type: 'cubic-horizontal',
          style: {
            stroke: '#A3B1BF'
          }
        },
        layout: {
          type: 'mindmap',
          direction: 'H',
          getHeight: () => {
            return 26
          },
          getWidth: () => {
            return 26
          },
          getVGap: () => {
            return 20
          },
          getHGap: () => {
            return 50
          },
          getSide: d => {
            if (d.id === 'node1') {
              return 'left'
            }
            return 'right'
          }
        }
      })
      let centerX = 0;
      graph.node(function (node) {
        console.log(node)
        if (node.id === 'Modeling Methods') {
          centerX = node.x;
        }

        return {
          label: node.label,
          labelCfg: {
            position:
              node.children && node.children.length > 0
                ? 'left'
                : node.x > centerX
                  ? 'right'
                  : 'left',
            offset: 5,
          },
        };
      });

      graph.data(this.demoData);
      graph.render();
      graph.fitView();

    }
  }
}
</script>

<style scoped>
</style>